<template>
<view class="container">
  <!-- 导航栏 -->
  <view class="nav-bar">
    <view 
      class="nav-item"
      :class="{active:currentView==='week'}"
      @click="switchView('week')"
    >
      周统计
    </view>
    <view 
      class="nav-item"
      :class="{active:currentView==='day'}"
      @click="switchView('day')"
    >
      日统计
    </view>
  </view>
  
  <!-- 周统计内容 -->
  <view v-if="currentView==='week'" class="week-view">
    <!-- 睡眠时长卡片 -->
    <view class="card">
      <view class="card-header">
        <text class="title">睡眠时长</text>
        <view class="stats">
          <text class="stat-value">82分</text>
          <text class="stat-label">周平均</text>
        </view>
      </view>
      <qiun-data-charts
        type="column"
        :opts="opts"
        :chartData="chartData"
      />
    </view>
    
    <!-- 睡眠时间分布卡片 -->
    <view class="card">
      <view class="card-header">
        <text class="title">睡眠时间分布</text>
        <view class="stats">
          <text class="stat-value">01:30-07:45</text>
          <text class="stat-label">平均时段</text>
        </view>
      </view>
      <qiun-data-charts 
        type="column"
        :opts="optSleep"
        :chartData="chartSleepData"
      />
    </view>
    
    <!-- 睡眠质量卡片 -->
    <view class="card">
      <view class="card-header">
        <text class="title">睡眠质量得分</text>
        <view class="stats">
          <text class="stat-value">72分</text>
          <text class="stat-label">周平均</text>
        </view>
      </view>
      <qiun-data-charts 
        type="column"
        :opts="sleepQuality"
        :chartData="sleepScore"
      />
    </view>
  </view>
  
  <!-- 日统计内容 -->
  <view v-else class="day-view">
    <!-- 睡眠概览卡片 -->
    <view class="card">
      <view class="day-header">
        <text class="date">{{currentDate}}</text>
        <text class="source">数据来源：小米手环8 NFC版</text>
      </view>
      
      <!-- 睡眠质量得分 -->
      <view class="score-container">
        <text class="score-title">睡眠质量得分</text>
        <view class="score-main">
          <text class="score-value">{{dayData.sleepScore}}</text>
          <text class="score-unit">分</text>
        </view>
        <text class="score-comment">睡眠质量有待提高，超过{{dayData.betterThan}}%的同龄用户</text>
      </view>
      
      <!-- 睡眠动物形象 -->
      <view class="animal-card">
        <image class="animal-icon" src="/static/shark.png"></image>
        <text class="animal-text">您的睡眠动物是鲨鱼</text>
      </view>
      
      <!-- 长睡眠时段 -->
      <view class="sleep-period">
        <text class="period-label">长睡眠</text>
        <text class="period-time">{{dayData.mainSleep}}</text>
        <text class="period-range">{{dayData.sleepRange}}</text>
      </view>
      
      <!-- 睡眠阶段条形图 -->
      <qiun-data-charts
        type="column"
        :opts="daySleepBarOpts"
        :chartData="daySleepBarData"
      />
    </view>
    
    <!-- 睡眠结构卡片 -->
    <view class="card">
      <view class="card-header">
        <text class="title">睡眠结构</text>
        <view class="stats">
          <text class="stat-value">{{dayData.totalSleep}}</text>
        </view>
      </view>
      
      <view class="sleep-structure">
        <!-- 环形图 -->
        <qiun-data-charts
          type="ring"
          :opts="daySleepRingOpts"
          :chartData="daySleepRingData"
        />
        
        <!-- 睡眠阶段详情 -->
        <view class="stage-details">
          <view class="stage-item" v-for="item in dayData.sleepStages" :key="item.name">
            <view class="stage-color" :style="{backgroundColor: item.color}"></view>
            <text class="stage-name">{{item.name}}</text>
            <text class="stage-percent">{{item.percent}}%</text>
            <text class="stage-time">({{item.time}})</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 健康指标卡片 -->
    <view class="card health-metrics">
      <view class="metric-item">
        <text class="metric-label">睡眠平均心率</text>
        <text class="metric-value">{{dayData.avgHeartRate}}次/分</text>
      </view>
      <view class="metric-item">
        <text class="metric-label">睡眠平均血氧</text>
        <text class="metric-value">{{dayData.avgBloodOxygen}}%</text>
      </view>
      <view class="metric-item">
        <text class="metric-label">睡眠呼吸质量</text>
        <text class="metric-value">{{dayData.breathQuality || '暂无数据'}}</text>
      </view>
    </view>
    
    <!-- 睡眠建议卡片 -->
    <view class="card advice-card">
      <view class="card-header">
        <text class="title">睡眠解读与建议</text>
        <text class="support">技术支持：中国睡眠研究会</text>
      </view>
      <text class="advice-text">{{dayData.sleepAdvice}}</text>
      <text class="view-more">全文 ></text>
    </view>
    
    <!-- 零星小睡卡片 -->
    <view class="card nap-card" v-if="dayData.napTime">
      <view class="card-header">
        <text class="title">零星小睡</text>
        <text class="source">数据来源：小米手环8 NFC版</text>
      </view>
      <text class="nap-time">{{dayData.napTime}}</text>
    </view>
  </view>
</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const currentView = ref('week')
const currentDate = ref(formatDate(new Date()))
const chartData = ref({})
const chartSleepData = ref({})
const sleepScore = ref({})

const dayData = ref({
  sleepScore: 49,
  betterThan: 18,
  mainSleep: "3小时2分钟",
  sleepRange: "03:02 - 06:04",
  totalSleep: "3小时2分",
  sleepStages: [
    { name: "快速眼动", percent: 16, time: "29分", color: "#93C5FD", range: "10%-30%" },
    { name: "浅睡", percent: 59, time: "1时47分", color: "#60A5FA", range: "20%-60%" },
    { name: "深睡", percent: 25, time: "46分", color: "#3B82F6", range: "20%-40%" }
  ],
  avgHeartRate: 58,
  avgBloodOxygen: 97,
  breathQuality: "",
  sleepAdvice: "您的睡眠质量不理想，主要表现为睡眠时间短、入睡时间晚。建议保持规律作息，睡前避免使用电子设备，可通过冥想等方式缓解情绪...",
  napTime: "23分钟 (05/05 13:24 - 13:47)"
})

const opts = ref({
  color: ["#7B6CF7","#B987F8"],
  padding: [15,15,0,5],
  enableScroll: false,
  legend: {
    position: "bottom",
    margin: 10
  },
  xAxis: {
    disableGrid: true,
    axisLineColor: "#E4E7ED"
  },
  yAxis: {
    gridType: "dash",
    dashLength: 2,
    data: [
      {
        min: 0,
        axisLineColor: "#E4E7ED",
        splitLineColor: "#F7F8FA"
      }
    ]
  },
  extra: {
    column: {
      type: "stack",
      width: 18,
      activeBgColor: "#000000",
      activeBgOpacity: 0.08,
      labelPosition: "center"
    }
  }
})

const optSleep = ref({
  color: ['#7B6CF7','#3B82F6'],
  padding: [15,15,0,5],
  enableScroll: false,
  legend: {
    position: "bottom",
    margin: 10
  },
  xAxis: {
    disableGrid: true,
    axisLineColor: "#E4E7ED"
  },
  yAxis: {
    gridType: "dash",
    dashLength: 2,
    data: [{
      min: 0,
      max: 24,
      axisLineColor: "#E4E7ED",
      splitLineColor: "#F7F8FA",
      format: v => {
        const h = Math.floor(v)
        const m = Math.floor((v-h)*60)
        return `${h}:${m<10?'0'+m:m}`
      }
    }]
  },	
  extra: {
    column: {
      width: 12, 
      categoryGap: '30%'
    }
  }	
})

const sleepQuality = ref({
  color: ['#7B6CF7'],
  padding: [15,15,0,5],
  enableScroll: false,
  legend: {
    show: false
  },
  xAxis: {
    disableGrid: true,
    axisLineColor: "#E4E7ED"
  },
  yAxis: {
    gridType: "dash",
    dashLength: 2,
    data: [{
      min: 0,
      max: 100,
      axisLineColor: "#E4E7ED",
      splitLineColor: "#F7F8FA",
      format: val => `${val}分`
    }]
  },	
  extra: {
    column: {
      width: 20, 
      categoryGap: '60%',
      linearType: "custom",
      linearOpacity: 1,
      linearColor: ["#7B6CF7", "#B987F8"]
    }
  }	
})

const daySleepBarOpts = ref({
  color: ["#3B82F6", "#60A5FA", "#93C5FD"],
  padding: [15, 30, 10, 15],
  enableScroll: false,
  legend: {
    show: false
  },
  xAxis: {
    disableGrid: true,
    axisLineColor: "#E4E7ED",
    labelCount: 2
  },
  yAxis: {
    gridType: "dash",
    dashLength: 4,
    splitNumber: 3,
    data: [{
      min: 0,
      axisLineColor: "#E4E7ED",
      splitLineColor: "#F7F8FA"
    }]
  },
  extra: {
    column: {
      type: "group",
      width: 20,
      categoryGap: 2,
      activeBgColor: "#000000",
      activeBgOpacity: 0.08
    }
  }
})

const daySleepRingOpts = ref({
  color: ["#3B82F6", "#60A5FA", "#93C5FD"],
  padding: [5, 5, 5, 5],
  enableScroll: false,
  legend: {
    show: false
  },
  extra: {
    pie: {
      ringWidth: 30,
      label: {
        show: false
      }
    }
  }
})

const daySleepBarData = computed(() => ({
  categories: ["睡眠阶段"],
  series: [
    { name: "深睡", data: [46] },
    { name: "浅睡", data: [107] },
    { name: "快速眼动", data: [29] }
  ]
}))

const daySleepRingData = computed(() => ({
  series: [
    { name: "快速眼动", data: 16 },
    { name: "浅睡", data: 59 },
    { name: "深睡", data: 25 }
  ]
}))

onMounted(() => {
  getServerData()
  getServerData2()
  getServerData3()
})

function formatDate(date) {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${year}年${month}月${day}日`
}

function switchView(view) {
  currentView.value = view
}

function getServerData() {
  setTimeout(() => {
    chartData.value = {
      categories: ["周一","周二","周三","周四","周五","周六","周日"],
      series: [
        {
          name: "深睡",
          data: [35,36,31,33,13,34,30]
        },
        {
          name: "浅睡",
          data: [18,27,21,24,6,28,20]
        }
      ]
    }
  }, 5)
}

function getServerData2() {
  setTimeout(() => {
    chartSleepData.value = {
      categories: ["周一","周二","周三","周四","周五","周六","周日"],
      series: [
        {
          name: "入睡时间",
          data: [23.5, 23.0, 23.2, 23.8, 23.3, 23.5, 23.0] 
        },
        {
          name: "起床时间",
          data: [7.5, 7.0, 7.2, 7.8, 7.3, 7.5, 7.0] 
        }
      ]
    }
  }, 5)
}

function getServerData3() {
  setTimeout(() => {
    sleepScore.value = {
      categories: ["周一","周二","周三","周四","周五","周六","周日"],
      series: [
        {
          name: "睡眠质量",
          data: [60, 20, 92, 81, 83, 75, 40] 
        }
      ]
    }
  }, 5)
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #F7F8FA;
  min-height: 100vh;
}

/* 导航栏样式 */
.nav-bar {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
  
  .nav-item {
    flex: 1;
    text-align: center;
    padding: 24rpx 0;
    font-size: 28rpx;
    color: #666;
    position: relative;
    transition: all 0.3s;
    
    &.active {
      color: #7B6CF7;
      font-weight: 500;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80rpx;
        height: 4rpx;
        background-color: #7B6CF7;
        border-radius: 2rpx;
      }
    }
  }
}

/* 卡片通用样式 */
.card {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }
  
  .stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    
    .stat-value {
      font-size: 28rpx;
      font-weight: 500;
      color: #7B6CF7;
    }
    
    .stat-label {
      font-size: 24rpx;
      color: #999;
      margin-top: 4rpx;
    }
  }
  
  .support {
    font-size: 24rpx;
    color: #999;
  }
}

/* 日统计头部 */
.day-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  
  .date {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
  
  .source {
    font-size: 24rpx;
    color: #999;
  }
}

/* 睡眠质量得分 */
.score-container {
  text-align: center;
  margin: 20rpx 0 30rpx;
  
  .score-title {
    font-size: 28rpx;
    color: #666;
  }
  
  .score-main {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin: 10rpx 0;
  
  .score-value {
    font-size: 72rpx;
    font-weight: bold;
    color: #333;
  }
  
  .score-unit {
    font-size: 32rpx;
    color: #666;
    margin-left: 8rpx;
  }
}

.score-comment {
  font-size: 26rpx;
  color: #FF6B6B;
}
}

/* 睡眠动物卡片 */
.animal-card {
  background: #F0F7FF;
  border-radius: 12rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  margin: 20rpx 0;
  
  .animal-icon {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
  }
  
  .animal-text {
    font-size: 28rpx;
    color: #3B82F6;
    font-weight: 500;
  }
}

/* 睡眠时段 */
.sleep-period {
  display: flex;
  align-items: center;
  margin: 20rpx 0;
  
  .period-label {
    font-size: 28rpx;
    color: #666;
    margin-right: 20rpx;
  }
  
  .period-time {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
    margin-right: 20rpx;
  }
  
  .period-range {
    font-size: 26rpx;
    color: #999;
  }
}

/* 睡眠结构 */
.sleep-structure {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  
  .stage-details {
    flex: 1;
    margin-left: 40rpx;
  }
  
  .stage-item {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .stage-color {
      width: 24rpx;
      height: 24rpx;
      border-radius: 6rpx;
      margin-right: 16rpx;
    }
    
    .stage-name {
      font-size: 26rpx;
      color: #666;
      width: 120rpx;
    }
    
    .stage-percent {
      font-size: 26rpx;
      color: #333;
      font-weight: 500;
      width: 80rpx;
      text-align: right;
      margin-right: 10rpx;
    }
    
    .stage-time {
      font-size: 24rpx;
      color: #999;
    }
  }
}

/* 健康指标 */
.health-metrics {
  .metric-item {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #F0F0F0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .metric-label {
      font-size: 28rpx;
      color: #666;
    }
    
    .metric-value {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

/* 睡眠建议 */
.advice-card {
  .advice-text {
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .view-more {
    display: block;
    text-align: right;
    font-size: 26rpx;
    color: #3B82F6;
    margin-top: 20rpx;
  }
}

/* 零星小睡 */
.nap-card {
  .nap-time {
    font-size: 28rpx;
    color: #333;
  }
}

/* 图表容器 */
qiun-data-charts {
  display: block;
  width: 100%;
  height: 360rpx;
}
</style>